<template >
  <div class="ly-sub-menu">
    <div class="sub-item_title" @click="onSubTitleClick" >
      <ly-svg-icon v-if="subObj.icon" :icon-class="subObj.icon" class="title-icon"></ly-svg-icon>
      <span>{{subObj.title}}</span>
    <ly-icon v-if="hasSub(subObj)" name="arrow-down" color="" class="arr-icon" :class="{'is-rotate':!isHiddenItem}"></ly-icon>
    </div>
      <ly-menu-item ref="item" v-show="isHiddenItem" v-for="(sub,index) in subObj.children" :key="index" :itemObj="sub"></ly-menu-item>
  </div>
</template>
<script>
export default {
  name: "lySubMenu",
  data() {
    return {
      originalHeight: undefined,
      titleHight: undefined,
      isHiddenItem: true,
    };
  },
  inject: ["dataMenus"],
  props: {
    subObj: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: [String, Number],
      default: "",
    },
  },
  mounted() {
  },
  methods: {
    hasSub(childItem) {
      return (
        childItem.children &&
        Array.isArray(childItem.children) &&
        childItem.children.length > 0
      );
    },
    onSubTitleClick(e) {
      // 动画效果暂未添加
      this.isHiddenItem = !this.isHiddenItem;
    },
  },
};
</script>
<style lang="scss">
.ly-sub-menu {
  // min-width: 200px;
  transition: height 3s;
  overflow: hidden;
  .title-icon{
    margin-right: 6px;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .sub-item_title {
    height: 56px;
    line-height: 56px;
    font-size: 14px;
    // padding: 0 10px;
    position: relative;
    cursor: pointer;
    .arr-icon{
      position: absolute;
      top: 2px;
      right: 12px;
      transition: all .3s;
      // transform: translateY(-50%);
    }
    .is-rotate{
      transform:rotate(180deg)
    }
  }
}
</style>